<script setup>
import { onMounted, ref } from 'vue'
import { getPcdListApi } from '@/api/pcd'
import { ElMessage } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue'
import { addWarehouse, updateWarehouse } from '@/api/warehouse'
const dialogFormVisible = ref(false)
const emits = defineEmits(['flash'])
const title = ref('')
const pcdList = ref([])
const fromData = ref({
  id: '',
  name: '',
  cityId: '',
  address: '',
  personChargeName: '',
  isDel: '',
})
const resetForm = () => {
  fromData.value = {
    id: '',
    name: '',
    cityId: '',
    address: '',
    personChargeName: '',
    isDel: '',
  }
}
const getPcdList = async () => {
  const result = await getPcdListApi()
  pcdList.value = result.data
}
//将最后一个地址赋值给cityId
const handleChange = (val) => {
  fromData.value.cityId = val[val.length - 1]
}
// 将前端开关值(true或false)转换为后端数据(1或2)
const convertSwitchToBackend = (switchValue) => {
  return switchValue ? 1 : 2
}
const cancle = () => {
  dialogFormVisible.value = false
  resetForm()
}
//表单校验
const rules = ref({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
  ],
  cityId: [
    { required: true, message: '城市不能为空', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '地址不能为空', trigger: 'blur' },
  ],
  personChargeName: [
    { required: true, message: '负责人不能为空', trigger: 'blur' },
  ],
})
//表单提交校验
const ruleFormRef = ref(null)
const submit = async () => {
  if (!ruleFormRef) return
  await ruleFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (typeof fromData.value.isDel === 'boolean') {
        fromData.value.isDel = convertSwitchToBackend(fromData.value.isDel)
      }
      let result = null
      if (fromData.value.id) {
        result = await updateWarehouse(fromData.value)
        if (result.code == 200) {
          emits('flash')
          dialogFormVisible.value = false
          ElMessage.success('修改成功!')
          resetForm()
        } else {
          ElMessage.error('修改失败!')
        }
      } else {
        result = await addWarehouse(fromData.value)
        if (result.code == 200) {
          emits('flash')
          dialogFormVisible.value = false
          ElMessage.success('操作成功!')
          resetForm()
        } else {
          ElMessage.error('操作失败!')
        }
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
onMounted(() => {
  getPcdList()
})
defineExpose({
  dialogFormVisible,
  title,
  resetForm,
  fromData,
})
</script>
<template>
  <el-dialog v-model="dialogFormVisible" :title="title" width="600" :close-on-click-modal="false">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="fromData" :rules="rules" label-width="auto">
      <el-form-item label="仓库名称：" prop="name">
        <el-input v-model="fromData.name" placeholder="请输入仓库名称" />
      </el-form-item>
      <el-form-item label="所在城市：" prop="cityId">
        <el-cascader v-model="fromData.cityId" :options="pcdList" @change="handleChange" style="width: 300px;"
          placeholder="请选择所在城市" />
      </el-form-item>
      <el-form-item label="详细地址：" prop="address">
        <el-input v-model="fromData.address" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="负责人：" prop="personChargeName">
        <el-input v-model="fromData.personChargeName" placeholder="请输入负责人" />
      </el-form-item>
      <el-form-item label="是否有效：" prop="isDel">
        <el-switch v-model="fromData.isDel" :active-value="1" :inactive-value="2" size="large" class="mt-2"
          inline-prompt :active-icon="Check" :inactive-icon="Close" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancle()">取消</el-button>
        <el-button type="primary" @click="submit()"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped></style>